<template>
  <view class="create-todo-page">


    <!-- Main Content -->
    <scroll-view class="main-content" scroll-y>
      <!-- Todo Content -->
      <view class="form-section">
        <text class="form-label">待办事项</text>
        <textarea 
          class="form-textarea" 
          v-model="todoForm.content" 
          placeholder="例如：下午3点开会讨论新功能"
          maxlength="200"
        />
      </view>

      <!-- Due Date -->
      <view class="form-section">
        <text class="form-label">截止日期</text>
        <picker 
          mode="date" 
          :value="todoForm.dueDate" 
          @change="setDueDate"
          class="date-picker"
        >
          <view class="picker-display">
            <text class="picker-text">{{ todoForm.dueDate || '选择日期' }}</text>
          </view>
        </picker>
      </view>

      <!-- Priority -->
      <view class="form-section">
        <text class="form-label">优先级</text>
        <view class="priority-options">
          <view 
            class="priority-option high" 
            :class="{selected: todoForm.priority === 'high'}"
            @tap="setPriority('high')"
          >
            <uni-icons type="flag" size="16" color="#EF4444" />
            <text class="priority-text">高</text>
          </view>
          <view 
            class="priority-option medium" 
            :class="{selected: todoForm.priority === 'medium'}"
            @tap="setPriority('medium')"
          >
            <uni-icons type="flag" size="16" color="#F59E0B" />
            <text class="priority-text">中</text>
          </view>
          <view 
            class="priority-option low" 
            :class="{selected: todoForm.priority === 'low'}"
            @tap="setPriority('low')"
          >
            <uni-icons type="flag" size="16" color="#3B82F6" />
            <text class="priority-text">低</text>
          </view>
        </view>
      </view>

      <!-- List / Category -->
      <view class="form-section">
        <text class="form-label">所属清单</text>
        <picker 
          :value="todoForm.listIndex" 
          :range="listOptions" 
          @change="setList"
          class="list-picker"
        >
          <view class="picker-display">
            <text class="picker-text">{{ listOptions[todoForm.listIndex] || '默认清单' }}</text>
          </view>
        </picker>
      </view>

      <!-- Notes -->
      <view class="form-section">
        <text class="form-label">备注 (可选)</text>
        <textarea 
          class="form-textarea notes" 
          v-model="todoForm.notes" 
          placeholder="补充说明或相关链接..."
          maxlength="100"
        />
      </view>

      <!-- Motivational Image -->
      <image 
        src="/static/images/notebook.jpg" 
        class="motivational-image"
        mode="aspectFill"
      />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CreateTodo',
  data() {
    return {
      todoForm: {
        content: '',
        dueDate: '',
        priority: 'medium',
        listIndex: 0,
        notes: ''
      },
      listOptions: ['默认清单', '工作', '个人', '学习', '购物']
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    setPriority(priority) {
      this.todoForm.priority = priority
    },
    
    setDueDate(e) {
      this.todoForm.dueDate = e.detail.value
    },
    
    setList(e) {
      this.todoForm.listIndex = e.detail.value
    },
    
    saveTodo() {
      // 验证必填字段
      if (!this.todoForm.content.trim()) {
        uni.showToast({
          title: '请输入待办内容',
          icon: 'none'
        })
        return
      }
      
      // 构建待办数据
      const todoData = {
        id: Date.now().toString(),
        content: this.todoForm.content.trim(),
        dueDate: this.todoForm.dueDate,
        priority: this.todoForm.priority,
        list: this.listOptions[this.todoForm.listIndex],
        notes: this.todoForm.notes.trim(),
        completed: false,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString()
      }
      
      // 保存到本地存储或发送到服务器
      try {
        // 这里可以调用API或保存到本地
        console.log('保存待办:', todoData)
        
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        })
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('保存失败:', error)
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    }
  },
  // 处理导航栏按钮点击事件
  onNavigationBarButtonTap(e) {
      console.log(`点击了第${e.index + 1}个按钮`)
      if (e.index === 0) { // 第一个按钮（保存按钮）
        this.saveTodo()
      }
    },
  onLoad() {
    // 设置默认截止日期为今天
    const today = new Date()
    const year = today.getFullYear()
    const month = String(today.getMonth() + 1).padStart(2, '0')
    const day = String(today.getDate()).padStart(2, '0')
    this.todoForm.dueDate = `${year}-${month}-${day}`
  }
}
</script>

<style scoped>
.create-todo-page {
  background-color: #F3F4F6;
  min-height: 100vh;
  max-width: 750rpx;
  margin: 0 auto;
}

.header {
  padding: 32rpx;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 42rpx;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
  flex: 1;
}

.save-btn {
  font-size: 32rpx;
  color: #10B981;
  font-weight: 500;
  width: 80rpx;
  text-align: right;
}

.main-content {
  padding: 32rpx;
  background-color: #F3F4F6;
  width: auto;
}

.form-section {
  background-color: #FFFFFF;
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid #E5E7EB;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1F2937;
  display: block;
  margin-bottom: 32rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #374151;
  display: block;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #1F2937;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #10B981;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #1F2937;
  background-color: #FFFFFF;
  resize: none;
  box-sizing: border-box;
}

.form-textarea.notes {
  min-height: 100rpx;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-switch {
  transform: scale(0.8);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.category-item {
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  text-align: center;
  background-color: #F9FAFB;
}

.category-item.active {
  border-color: #10B981;
  background-color: #ECFDF5;
}

.category-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.category-text {
  font-size: 24rpx;
  color: #374151;
}

.category-item.active .category-text {
  color: #10B981;
  font-weight: 500;
}

.priority-options {
  display: flex;
  gap: 16rpx;
}

.priority-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  background-color: #F9FAFB;
}

.priority-option.high.selected {
  border-color: #EF4444;
  background-color: #FEF2F2;
}

.priority-option.medium.selected {
  border-color: #F59E0B;
  background-color: #FFFBEB;
}

.priority-option.low.selected {
  border-color: #3B82F6;
  background-color: #EFF6FF;
}

.priority-text {
  font-size: 28rpx;
  color: #374151;
}

.priority-option.selected .priority-text {
  font-weight: 500;
}

.priority-option.high.selected .priority-text {
  color: #EF4444;
}

.priority-option.medium.selected .priority-text {
  color: #F59E0B;
}

.priority-option.low.selected .priority-text {
  color: #3B82F6;
}

.date-picker,
.time-picker,
.datetime-picker {
  width: 100%;
}

.picker-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.picker-text {
  font-size: 32rpx;
  color: #1F2937;
}

.picker-arrow {
  font-size: 32rpx;
  color: #9CA3AF;
}

.reminder-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.reminder-option {
  padding: 20rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  text-align: center;
  background-color: #F9FAFB;
}

.reminder-option.active {
  border-color: #10B981;
  background-color: #ECFDF5;
}

.reminder-text {
  font-size: 24rpx;
  color: #374151;
}

.reminder-option.active .reminder-text {
  color: #10B981;
  font-weight: 500;
}

.add-subtask,
.add-tag {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.subtask-input,
.tag-input {
  flex: 1;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #1F2937;
  background-color: #FFFFFF;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #10B981;
  color: #FFFFFF;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subtask-list {
  margin-top: 16rpx;
}

.subtask-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #F9FAFB;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
}

.subtask-text {
  font-size: 28rpx;
  color: #374151;
  flex: 1;
}

.remove-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #EF4444;
  color: #FFFFFF;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.tag-item {
  padding: 16rpx 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 20rpx;
  background-color: #F9FAFB;
}

.tag-item.active {
  border-color: #10B981;
  background-color: #ECFDF5;
}

.tag-text {
  font-size: 24rpx;
  color: #374151;
}

.tag-item.active .tag-text {
  color: #10B981;
  font-weight: 500;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 16rpx;
}

.selected-tag {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 16rpx;
  background-color: #10B981;
  border-radius: 20rpx;
}

.selected-tag-text {
  font-size: 24rpx;
  color: #FFFFFF;
}

.remove-tag-btn {
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  background-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-section {
  background-color: #FFFFFF;
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.todo-preview {
  padding: 24rpx;
  background-color: #F9FAFB;
  border-radius: 12rpx;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.preview-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1F2937;
  flex: 1;
  margin-right: 16rpx;
}

.preview-priority {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.preview-priority.high {
  background-color: #FEE2E2;
}

.preview-priority.medium {
  background-color: #FEF3C7;
}

.preview-priority.low {
  background-color: #DBEAFE;
}

.priority-badge {
  font-size: 24rpx;
  font-weight: 500;
}

.preview-priority.high .priority-badge {
  color: #EF4444;
}

.preview-priority.medium .priority-badge {
  color: #F59E0B;
}

.preview-priority.low .priority-badge {
  color: #3B82F6;
}

.preview-category {
  font-size: 24rpx;
  color: #6B7280;
  display: block;
  margin-bottom: 8rpx;
}

.preview-due {
  font-size: 24rpx;
  color: #6B7280;
  display: block;
  margin-bottom: 12rpx;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.preview-tag {
  padding: 8rpx 12rpx;
  background-color: #E5E7EB;
  border-radius: 12rpx;
  font-size: 20rpx;
  color: #6B7280;
}

.motivational-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  margin-top: 8rpx;
}
</style>